<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>起床案例Promise版本</title>
</head>

<body>

    <script>
        // 使用promise 完成起床的异步操作
        const p = new Promise(res => {
            setTimeout(() => {
                console.log('起床...')
                res()
            }, 1000)
        })

        // 开始执行一系列异步操作
        p.then(() => new Promise(res => {
            setTimeout(() => {
                console.log('上厕所....')
                res()
            }, 1000)
        })).then(() => new Promise(res => {
            setTimeout(() => {
                console.log('刷牙....')
                res()
            }, 1000)
        })).then(() => new Promise(res => {
            setTimeout(() => {
                console.log('吃早餐....')
                res()
            }, 1000)
        })).then(() => new Promise(res => {
            setTimeout(() => {
                console.log('出门....')
                res()
            }, 1000)
        }))
        // 如此这般 使得代码结构一致 可读性高 易于修改和维护

        // 但看起来任然比较繁杂 再次精简代码
        function getUp() {
            return new Promise((res => {
                setTimeout(() => {
                    console.log('')
                    console.log('第二个版本执行')
                    console.log('')
                    console.log('起完床...')
                    res()
                }, 6000)
            }))
        }

        // 将起床后要做的事封装成函数形式
        function job(work, duration) {
            return () => new Promise((res, rej) => {
                setTimeout(() => {
                    console.log(work)

                    // 代码有20%的可能失败 传入参数 就可以捕获到失败信息
                    if (Math.random() < .2) {
                        rej(work)
                    } else {
                        res()
                    }
                }, duration)
            })
        }

        // 开始执行异步操作
        getUp()
            .then(job('上完厕所...', 3000))
            .then(job('刷完牙...', 2000))
            .then(job('吃完早点...', 3000))
            .then(job('出门了...', 1000))
            .catch(err => {
                console.log(err + "出错了！")
            })
    </script>
</body>

</html>